<template>
  <div ref="echartsRef" class="graphics" style="min-height: 600px"></div>
  <div v-if="logs?.xAxisDatas.length"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import store from "~/utils/store";

const props = defineProps({
  text: {
    type: Boolean,
    default: true,
  },
});

const echartsRef = ref(null);
const config = toRef(store);
var myChart = null;

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  DataZoomComponent,
]);

const logs = computed(() => {
  let res = { legend: { selected: {}, data: [] }, xAxisDatas: [], series: [] };
  const key2name = {
    voltage: "电压",
    current: "电流",
    power: "功率",
    temp: "温度",
    bat: "电池",
  };
  if (!config.value?.logs || !config.value?.logs.length) return res;
  res.xAxisDatas = config.value.logs.map((item) => {
    return new Date(item.time * 1000).toLocaleString();
  });
  for (const key in key2name) {
    if (!(key in config.value.logs[0])) continue;
    if (key === "bat") {
      const max = config.value.logs[0]?.bat?.length || 4;
      for (let i = 0; i < max; i++) {
        let name = key2name[key] + (i + 1);
        res.legend.data.push(name);
        res.legend.selected[name] = false;
        res.series.push({
          name,
          type: "line",
          // stack: "voltage" /* 电压堆叠在一起 */,
          smooth: true /* 平滑 */,
          /* 显示具体值 */
          label: {
            show: props.text,
            position: "top",
          },
          areaStyle: { opacity: 0.7 },
          data: config.value.logs.map((item) => item[key][i].toFixed(2)),
        });
      }
    } else {
      res.legend.data.push(key2name[key]);
      if (key === "power") res.legend.selected[key2name[key]] = true;
      else if (key === "voltage") res.legend.selected[key2name[key]] = true;
      else res.legend.selected[key2name[key]] = false;
      res.series.push({
        name: key2name[key],
        type: "line",
        // stack: key,
        smooth: true /* 平滑 */,
        /* 显示具体值 */
        label: {
          show: props.text,
          position: "top",
        },
        areaStyle: { opacity: 0.5 },
        data: config.value.logs.map((item) => {
          return item[key].toFixed(2);
        }),
      });
    }
  }
  if (myChart)
    myChart.setOption({
      xAxis: {
        data: res.xAxisDatas,
      },
      series: res.series,
    });
  return res;
});

onMounted(() => {
  myChart = echarts.init(echartsRef.value);
  var option = {
    /* 鼠标放到指定位置会弹出提示框, 展示对应点位的信息 */
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    /* 顶部选择标题 */
    legend: logs.value.legend,
    grid: {
      left: "5%",
      right: "5%",
      bottom: "10%",
      containLabel: true,
    },
    /* X轴 - 显示日期 */
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: logs.value.xAxisDatas,
    },
    /* Y轴 - 显示值 */
    yAxis: {
      type: "value",
    },
    /* 数据 */
    series: logs.value.series,
    /* 缩放显示 */
    dataZoom: [
      {
        type: "slider",
        filterMode: "none",
        handleSize: 48,
        /* 百分比 */
        start: 90,
        end: 100,
      },
      {
        type: "inside",
        filterMode: "none",
        handleSize: 48,
        /* 百分比 */
        start: 90,
        end: 100,
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
.graphics {
  width: 100%;
  height: 100%;
}
</style>
